<template>
  <div>
    <div class="title">
      <div>
        <img class="title-img" src="static/Home-img/icon-LOGO.png" />
      </div>
      <!-- <div class="weather1">{{weather.high}}</div>
      <div class="weather2">{{weather.type}}</div>-->
    </div>
    <!-- 导航栏 -->
    <van-nav-bar class="nav">
      <template #left>
        <van-field class="input-title" placeholder="搜商品/技巧/热帖/渔具店铺">
          <template #left-icon>
            <van-icon name="search" />
          </template>
          <template #right-icon>
            <img class="icon-title" src="static/Home-img/icon-title-fish.png" />
          </template>
        </van-field>
        <button class="button">搜索</button>
      </template>
    </van-nav-bar>
    <!--总体广告栏 -->
    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img class="advert-img" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航 -->
    <div>
      <van-swipe class="my-swipe" indicator-color="rgb(25,137,250)">
        <van-swipe-item>
          <div class="content">
            <div @click="tyu()">
              <img
                class="content-img"
                src="static/Home-img/icon-location.png"
              />
              <p>钓场</p>
            </div>
            <div @click="forum()">
              <img class="content-img" src="static/Home-img/icon-forum.png" />
              <p>论坛</p>
            </div>
            <div @click="shopClick()">
              <img class="content-img" src="static/Home-img/icon-shop.png" />
              <p>正品商城</p>
            </div>
            <div @click="videoIndex()">
              <img class="content-img" src="static/Home-img/icon-video.png" />
              <p>视频</p>
            </div>
            <div>
              <img
                class="content-img"
                src="static/Home-img/icon-technique.png"
              />
              <p>技巧</p>
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="content">
            <div @click="PictureFish()">
              <img class="content-img" src="static/Home-img/icon-media.png" />
              <p>拍钓</p>
            </div>
            <div>
              <img class="content-img" src="static/Home-img/icon-weather.png" />
              <p>天气</p>
            </div>
            <div>
              <img
                class="content-img"
                src="static/Home-img/icon-notice(1).png"
              />
              <p>入门</p>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商城部分商品栏（限时商品秒杀） -->
    <div class="product-text">
      <div class="product-title">限时秒杀：</div>
      <div class="product-time">
        <van-count-down :time="time" />
      </div>
    </div>
    <div class="product-time">精品渔具，限时促销</div>
    <div class="product">
      <div v-for="(item, index) in shopImage" :key="index">
        <img class="shop-img" :src="item" />
      </div>
    </div>
    <!-- 文字导航 -->
    <van-tabs v-model="active">
      <!-- 文字导航一 -->
      <van-tab title="关注">
        <!-- 文字导航栏第一个标题下的内容 -->
        <div>
          <div class="content2-content">你关注的钓友太少</div>
          <div class="content2-text">介绍些大师给你</div>
        </div>
      </van-tab>
      <!-- 文字导航二 -->
      <van-tab title="推荐">
        <!-- 第二个标题下的内容 -->
        <div>
          <!-- 广告位 -->
          <div class="content1-advert-all">
            <div v-for="(item, index) in advertArr" :key="index">
              <div class="content1-advert-title">{{ item.title }}</div>
              <div>
                <img class="content1-advert-img" :src="item.url" />
              </div>
            </div>
          </div>
          <!-- 推荐论坛帖 -->
          <div class="content1-advert-all">
            <div v-for="(item, index) in message" :key="index">
              <div class="content1-advert-title">{{ item.title }}</div>
              <div class="content1-msg">
                <img class="content1-msg-img" :src="item.url[0]" />
                <img class="content1-msg-img" :src="item.url[1]" />
                <img class="content1-msg-img" :src="item.url[2]" />
              </div>
            </div>

            <div class="content1-user-all">
              <!-- 头像 -->
              <div>
                <van-image
                  round
                  width="5rem"
                  height="5rem"
                  src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
              </div>
              <!-- 用户信息 -->
              <div class="content1-user-infor">
                <div>
                  <span>用户名</span>
                  <span>用户等级</span>
                </div>
                <div>用户地址</div>
              </div>
              <div class="content1-user-talk">
                <van-icon name="chat-o" />
                {{ 20 }}
              </div>
              <div class="content1-user-good">
                <van-icon name="good-job-o" />
                {{ 80 }}
              </div>
            </div>
          </div>
          <!-- 推荐优秀视频 -->
          <div>
            <van-nav-bar>
              <template #left>
                <div>精选短视频</div>
              </template>
              <template #right>
                <div>查看全部</div>
                <van-icon name="arrow" size="18" />
              </template>
            </van-nav-bar>
            <div>推荐视频内容</div>
            <div>
            <div v-for="(inte,intx) in auu" :key="intx">
         <video :src="inte.videoPath" controls class="ship"></video>
            </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="附近">附近</van-tab>
      <van-tab title="小视频">视频</van-tab>
      <van-tab title="问答">问答</van-tab>
      <van-tab title="二手">二手</van-tab>
      <van-tab title="路亚">路亚</van-tab>
      <van-tab title="DIY">DIY</van-tab>
    </van-tabs>
    <!-- 论坛帖 -->
    <div>
      <router-view></router-view>
    </div>
    <!-- 发帖等 -->
    <div class="post">
      <img src="static/img/jia.png" alt @click="show = true" class="ui" />
      <van-overlay :show="show" @click="show = false" class="skk">
        <div class="yt">
          <div @click="post()">
            <div>
              <img src="static/img/icon-post.png" alt class="post-img1" />
            </div>
            <div>发长帖</div>
          </div>

          <div @click="tech()">
            <div>
              <img src="static/img/icon-talk-tech.png" alt class="post-img1" />
            </div>
            <div>问技巧</div>
          </div>

          <div @click="record()">
            <div>
              <img src="static/img/icon-record.png" alt class="post-img1" />
            </div>
            <div>随便说说</div>
          </div>

          <div @click="show()">
            <div>
              <img src="static/img/icon-media.png" alt class="post-img1" />
            </div>
            <div>拍视频</div>
          </div>
        </div>

        <div class="yt1">
          <div @click="sell()">
            <div>
              <img
                src="static/img/icon-second-hand-sell.png"
                alt
                class="post-img2"
              />
            </div>
            <div>出售二手</div>
          </div>

          <div @click="buy()">
            <div>
              <img
                src="static/img/icon-second-hand-buy.png"
                alt
                class="post-img2"
              />
            </div>
            <div>求购二手</div>
          </div>

          <div @click="location()">
            <div>
              <img
                src="static/img/icon-fish-location.png"
                alt
                class="post-img2"
              />
            </div>
            <div>加钓场</div>
          </div>

          <div @click="shop()">
            <div>
              <img src="static/img/icon-fish-shop.png" alt class="post-img2" />
            </div>
            <div>加渔具店</div>
          </div>
        </div>

        <div>
          <img src="static/img/cu.png" alt class="ppo" />
        </div>
      </van-overlay>
    </div>

    <!-- 底部导航栏 -->
    <div>
      <van-tabbar class="nav-tar" route>
        <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/add" icon="location-o">定位</van-tabbar-item>
        <van-tabbar-item to="/shop" icon="cart-circle-o">商城</van-tabbar-item>
        <van-tabbar-item to="/forum" icon="friends-o">论坛</van-tabbar-item>
        <van-tabbar-item to="/self" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
import axios from 'axios';
Vue.use(Lazyload);
export default {
  mounted() {
    // axios
    //   .get('http://wthrcdn.etouch.cn/weather_mini?citykey=101180901')
    //   .then(res => {
    //     console.log(res);
    //     // this.weather = res.data.data;
    //     this.weather = res.data.data.forecast[0];
    //     console.log(this.weather);
    //   });
    axios.post('/api/selectVideoList', {}).then((res) => {
      console.log(res.data.data);
     this.auu = res.data.data
    });
  },
  methods: {
    shopClick(){
        this.$router.push({
        name:'商城'
      })
    },
    videoIndex(){
      this.$router.push({
        name:'视频'
      })
    },
    forum() {
      this.$router.push({
        name: 'forum',
      });
    },
    // 发帖事件
    post() {
      event.stopPropagation();
      this.$router.push({
        name: '发帖',
        query: {
          ft: '发长帖',
        },
      });
    },
    tech() {
      event.stopPropagation();
      this.$router.push({
        name: '发帖',
        query: {
          ft: '问技巧',
        },
      });
    },PictureFish(){
      this.$router.push({
        name: '/PictureFish',
      })
    },
    tyu(){
        this.$router.push({
        name: '钓场',
      })
    },
    record() {
      event.stopPropagation();
      console.log(1);
    },
    
  },
  data() {
    return {
      auu:[],
      // 推荐页内容
      advertArr: [{ title: '广告标题', url: 'static/Home-img/carousel01.png' }],
      message: [
        {
          title: '论坛标题',
          url: [
            'static/Home-img/carousel01.png',
            'static/Home-img/carousel01.png',
            'static/Home-img/carousel01.png',
          ],
        },
      ],
      active: 1,
      // 首页天气数据
      weather: '',
      show: false,
      //  秒杀商品倒计时时间
      time: 30 * 60 * 60 * 1000,
      //  轮播图图片地址
      images: [
        'static/Home-img/carousel01.png',
        'static/Home-img/carousel02.png',
        'static/Home-img/carousel03.png',
      ],
      // 限时秒杀商品产品图
      shopImage: [
        'static/Home-img/carousel01.png',
        'static/Home-img/carousel02.png',
        'static/Home-img/carousel03.png',
      ],
    };
  },
};
</script>
<style scoped>
/* 导航栏 */
.nav {
  position: sticky;
  top: 5rem;
  width: 38.5rem;
  height: 5rem;
  background-color: white;
}
/* 导航输入框 */
.input-title {
  display: flex;
  align-items: center;
  width: 28rem;
  height: 3rem;
  border-radius: 0.5rem;
  border: 0.1rem solid grey;
}
/* 广告轮播图 */
.advert-img {
  width: 36.5rem;
  height: 12rem;
  border-radius: 0.5rem;
  margin-left: 1rem;
}
.icon-title {
  margin-top: 0.6rem;
  width: 2rem;
}
/* 图标导航 */
.content {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  margin-top: -1rem;
  padding-top: 2rem;
  height: 10rem;
}
/* 文字导航 */
.content-text {
  position: sticky;
  top: 10rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: white;
  margin-top: 2rem;
  font-size: 1.5rem;
  height: 3rem;
  width: 38.5rem;
}
.content-img {
  width: 5rem;
}
p {
  text-align: center;
}
.title-content {
  width: 15rem;
  display: inline-block;
}
/* LOGo行样式 */
.title {
  background-color: rgb(8, 99, 180);
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  width: 38.5rem;
  height: 5rem;
  z-index: 2;
}
/* LOGo行样式 */
.title-img {
  margin-left: 2rem;
  height: 4rem;
  margin-top: 0.5rem;
}

/* 导航栏按钮 */
.button {
  background-color: rgb(13, 116, 188);
  color: white;
  border: white solid 0.1rem;
  margin-left: 2rem;
  height: 3rem;
  width: 6rem;
  border-radius: 0.5rem;
  font-size: 1.5rem;
}
/* 限时秒杀商品图片样式 */
.shop-img {
  width: 8rem;
  height: 8rem;
  display: block;
  margin-left: 2rem;
  border-radius: 0.5rem;
  border: 0.5rem solid red;
}
/* 限时秒杀文字样式 */
.product-text {
  display: flex;
  border-top: 0.1rem gainsboro solid;
}
.product-title {
  color: red;
  font-weight: bolder;
  font-size: 2rem;
  margin-left: 2rem;
}
.product-time {
  font-weight: bolder;
  font-size: 1rem;
  margin-left: 2rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
/* 限时秒杀商品排列样式 */
.product {
  display: flex;
}
/* 发帖整体样式 */
.post {
  position: relative;
  z-index: 5;
}
/* 发帖按钮样式 */
.ui {
  opacity: 0.8;
  width: 5rem;
  position: fixed;
  bottom: 5rem;
  right: 2rem;
}
/* 发帖图片样式 */
.post-img1 {
  width: 5rem;
  font-size: 1.4rem;
}
.post-img2 {
  width: 5rem;
  font-size: 1.4rem;
}
.yt {
  display: flex;
  justify-content: space-around;
  margin-top: 45rem;
  margin-bottom: 3rem;
}
.yt1 {
  display: flex;
  justify-content: space-around;
  /* margin-top: 45rem; */
}
/* 蒙层样式 */
.skk {
  background-color: rgba(241, 240, 236, 0.959);
}
/* 关掉蒙层图片样式 */
.ppo {
  width: 5rem;
  position: relative;
  left: 16rem;
}
/* 天气样式 */
.weather1 {
  color: white;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-left: 16rem;
}
.weather2 {
  color: white;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-left: 2rem;
}
/* 文字导航（推荐）中的内容样式 */
.content1-advert-img {
  width: 36rem;
}
.content1-advert-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
}
.content1-advert-all {
  margin-top: 1rem;
  padding: 1rem;
  border-top: 0.1rem solid rgb(160, 156, 156);
}
.content1-msg-img {
  width: 10rem;
  height: 8rem;
  border-radius: 0.5rem;
}
.content1-msg {
  display: flex;
  justify-content: space-evenly;
}
.content1-user-all {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  border-bottom: 0.1rem solid rgb(160, 156, 156);
  padding-bottom: 1rem;
}
.content1-user-infor {
  margin-top: 1rem;
  margin-left: 2rem;
}
.content1-user-talk {
  margin-top: 2rem;
  margin-left: 13rem;
}
.content1-user-good {
  margin-top: 2rem;
  margin-left: 1rem;
}
/* 文字导航（关注）中的内容样式 */
.content2-content {
  width: 37.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 2rem;
  margin-top: 2rem;
}
.content2-text {
  width: 37.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 1.5rem;
}
/* 视频样式 */
.ship{
  width: 15rem;
}
</style>